<template>
  <div>
    <div>
      <div class="aside_open_close" @click="asidechange">
        <i class="el-icon-arrow-left" v-if="aside_open_close"></i>
        <i class="el-icon-arrow-right" v-else></i>
      </div>
      <el-drawer  :visible="drawer" style="max-width: 1200px; max-height: 500px; margin-left: 800px;margin-top: 100px">
        <div style="height: 300px;margin-left: 20px" >
          <el-steps :active="currentStep" finish-status="success" direction="vertical">
            <el-step title="创建活动" ></el-step>
            <el-step title="设置规则" ></el-step>
            <el-step title="准备审核" ></el-step>
          </el-steps>
        </div>
        <div style="position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);">
          <el-button type="success" @click="toggleDrawer">返回</el-button>
        </div>
      </el-drawer>
    </div>
    <div class="create-activity" style="margin-top: 10px">
      <el-form :model="activityForm" label-width="120px" class="activity-form">
        <el-row>
        <el-col :span="6">
        </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="活动名称" class="form-item">
              <el-input v-model="activityForm.name" @input="updateRuleFormName" placeholder="请输入活动名称" class="input-width"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="活动创建者" class="form-item">
              <el-input v-model="activityForm.creatorId" disabled :placeholder="userAccount" ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="活动类型" class="form-item" >
              <el-select v-model="activityForm.type" placeholder="请选择活动类型">
                <el-option label="线上" value="1"></el-option>
                <el-option label="校内" value="2"></el-option>
                <el-option label="校外" value="3"></el-option>
                <!-- 添加更多活动类型选项 -->
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">

          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="报名开始时间" class="form-item">
              <el-date-picker v-model="activityForm.activitySignStartTime" type="date" placeholder="选择日期" style="width: 200px"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="报名截止时间" class="form-item">
              <el-date-picker v-model="activityForm.activitySignEndTime" type="date" placeholder="选择日期" style="width: 200px"></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="活动开始时间" class="form-item">
              <el-date-picker v-model="activityForm.activityConStartTime" type="date" placeholder="选择日期" style="width: 200px"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="活动结束时间" class="form-item">
              <el-date-picker v-model="activityForm.activityConEndTime" type="date" placeholder="选择日期" style="width: 200px"></el-date-picker>
            </el-form-item>
          </el-col>

        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="活动最大人数" class="form-item" style="width: 300px">
              <el-input v-model="activityForm.activityMaxNum" placeholder="请输入活动最大人数" class="input-width" ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="活动描述" class="form-item">
              <vue-editor v-model="activityForm.activityDescription" placeholder="请输入活动描述" style="width: 850px;height: 150px"></vue-editor>
<!--              <el-input v-model="activityForm.activityDescription" type="textarea" :rows="3" placeholder="请输入活动描述" class="input-width"></el-input>-->
            </el-form-item>
          </el-col>
          <el-col :span="12">
          </el-col>
        </el-row>
        <el-form-item class="form-item submit-btn" style="margin-top: 80px;">
          <el-button type="primary" @click="submitForm" :loading="submitting">创建</el-button>
          <el-button type="success" @click="toggleRuleForm" >设置</el-button>
        </el-form-item>
      </el-form>
    </div>
      <div v-if="showRuleForm">
  <div class="create_Rule" style="margin-top: 100px;">
    <el-form :model="RuleForm" label-width="110px" class="activity-form">
      <el-form-item label="活动名称" class="form-item">
        <el-input v-model="RuleForm.activityName" placeholder="请输入名称" class="input-field"></el-input>
      </el-form-item>
      <el-form-item label="规则特殊说明" class="form-item">
        <el-input v-model="RuleForm.details" placeholder="请输入说明" style="width: 400px"></el-input>
      </el-form-item>
      <el-form-item label="成绩" class="form-item">
        <el-input v-model="RuleForm.grade" placeholder="请输入成绩" style="width: 220px"></el-input>
      </el-form-item>
      <el-form-item label="地点" class="form-item" >
        <el-cascader
            size="large"
            v-model="RuleForm.location"
            :options="options"
            placeholder="请选择地点"
            expand-trigger="hover"
            clearable
        ></el-cascader>
      </el-form-item>
      <el-form-item label="审核步骤" class="form-item">
        <el-radio-group v-model="RuleForm.step" class="radio-group">
          <el-radio :label="1" value="1">仅学校审核</el-radio>
          <el-radio :label="2" value="2">学校和学院审核</el-radio>
          <!-- 添加更多步骤选项 -->
        </el-radio-group>
      </el-form-item>
      <el-form-item label="发布人群" class="form-item">
        <el-select v-model="RuleForm.people" placeholder="请选择发布人群" class="select-field">
          <el-option label="仅学生" value="2"></el-option>
          <el-option label="仅老师" value="1"></el-option>
          <el-option label="学生和老师" value="0"></el-option>
          <!-- 添加更多人数选项 -->
        </el-select>
      </el-form-item>
      <el-form-item label="学校名称" class="form-item">
        <el-select v-model="selectedSchools" multiple placeholder="请选择学校名称" class="input-field">
          <el-option
              v-for="school in schoolOptions"
              :key="school.id"
              :label="school.name"
              :value="school.name">
          </el-option>
        </el-select>
        <el-form-item>
          <el-upload
              class="upload-demo"
              drag
              action="/api/file/upload"
              :on-success="handleAvatarSuccess"
              multiple
              style="margin-top: 20px"
              >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          </el-upload>
        </el-form-item>
      </el-form-item>
      <!-- 添加其他属性的输入框或下拉选择器 -->
      <el-form-item class="form-item submit-btn">
        <el-button type="primary" @click="insertRule(RuleForm)" class="submit-button">提交</el-button>
      </el-form-item>
    </el-form>
      </div>
    </div>
    <div id="bottomOfPage"></div>
  </div>
</template>

<script>
import {
  createActivity,
  insertActivityAndSchool,
  queryActivityName
} from '../../../../api/activity'
import {setRule} from '../../../../api/rule'
import {mapGetters} from 'vuex'
import {getMiddleSchool} from '../../../../api/middle'
import {insertActivityUrl} from '../../../../api/activityUrl'
import { VueEditor } from 'vue2-editor'
import { pcTextArr } from 'element-china-area-data'
export default {
  inject: ['reload'],
  computed: {
    ...mapGetters({
      userRole: 'user/getUserRole',
      userAccount: 'user/getUserAccount',
      userId: 'user/getUserId'
    })
  },
  components: {
    VueEditor
  },
  data () {
    return {
      options: pcTextArr,
      asideStatus: false,
      aside_open_close: false,
      currentStep: 0,
      drawer: false,
      content: '',
      submitting: false, // 添加加载状态变量
      postData: {
        uid: this.userId,
        sName: [],
        aid: ''
      },
      selectedSchools: [], // 存储选中的学校名称
      schoolOptions: [ // 学校名称选项列表
      ],
      ActivityName: '',
      showRuleForm: false, // 控制Rule部分是否显示的标志
      activityForm: {
        name: '',
        type: '',
        creatorId: this.userId,
        activitySignStartTime: null,
        activityConStartTime: null,
        activityMaxNum: null,
        activityNum: null,
        activityDescription: '',
        activitySignEndTime: null,
        activityConEndTime: null,
        status: ''
        // 添加其他属性
      },
      RuleForm: {
        activityName: null,
        aid: null,
        details: '',
        grade: '',
        location: [],
        step: '',
        people: '',
        schoolName: '',
        schoolId: null
        // 添加其他属性
      },
      url: '',
      fileName: ''
    }
  },
  created () {
    this.getMiddleSchool()
  },
  methods: {
    // 侧边栏收缩与展开
    asidechange () {
      this.asideStatus = !this.asideStatus
      this.drawer = true
      if (this.asideStatus) {
        setTimeout(() => {
          this.aside_open_close = true
        }, 500)
      } else {
        setTimeout(() => {
          this.aside_open_close = false
        }, 500)
      }
    },
    nextStep () {
      // 进入下一步
      this.currentStep++
    },
    toggleDrawer () {
      this.asideStatus = !this.asideStatus
      this.drawer = false
    },
    toggleRuleForm () {
      this.showRuleForm = !this.showRuleForm
      setTimeout(() => {
        const bottomElement = document.getElementById('bottomOfPage')
        if (bottomElement) {
          bottomElement.scrollIntoView({ behavior: 'smooth', block: 'end' })
        }
      }, 100)
    },

    saveUrlToDatabase () {
      queryActivityName(this.RuleForm.activityName).then(result => {
        insertActivityUrl(result.id, this.url, this.fileName)
          .then(response => {
            // 如果需要，处理成功的响应
            console.log('图片URL已保存到数据库')
          })
          .catch(error => {
            // 处理无法保存图片URL的错误
            console.error('保存图片URL时出错:', error)
          })
      })
    },
    handleAvatarSuccess (res, file) {
      // response是服务器返回的上传成功的结果
      console.log('上传成功:', file)
      // 可以将服务器返回的信息保存到组件的数据中
      this.url = res.url
      this.fileName = file.name
      this.saveUrlToDatabase()
    },
    getMiddleSchool () {
      getMiddleSchool().then(result => {
        this.schoolOptions = result
      })
    },
    submitForm () {
      this.submitting = true
      this.showRuleForm = true
      this.activityForm.creatorId = this.userId
      this.activityForm.activityDescription = this.activityForm.activityDescription.substring(3, this.activityForm.activityDescription.length - 4)
      createActivity(this.activityForm).then(result => {
        this.$notify({
          message: '活动创建成功',
          type: 'success'
        })
        this.ActivityName = this.activityForm.name
      })
      let that = this
      that.nextStep()
      setTimeout(() => {
        this.submitting = false
      }, 1000) // 假设 2 秒后完成提交
      setTimeout(() => {
        const bottomElement = document.getElementById('bottomOfPage')
        if (bottomElement) {
          bottomElement.scrollIntoView({ behavior: 'smooth', block: 'end' })
        }
      }, 100)
    },
    updateRuleFormName () {
      this.RuleForm.activityName = this.activityForm.name
    },
    insertRule (Rule) {
      queryActivityName(this.RuleForm.activityName).then(result => {
        if (result && result.id) { // 确保 result.id 存在并不为空
          this.postData.aid = result.id
          this.postData.uid = this.userId
          this.postData.sName = this.selectedSchools
          Rule.schoolName = this.selectedSchools.join(',')
          Rule = this.RuleForm
          Rule.aid = result.id
          insertActivityAndSchool(this.postData)
            .then(insertResult => {})
          // 处理插入数据后的逻辑
          const selectedLocation = Rule.location
          if (selectedLocation.length === 2) {
            Rule.province = selectedLocation[0]
            Rule.city = selectedLocation[1]
          } else if (selectedLocation.length === 1) {
            Rule.province = selectedLocation[0]
          }
          setRule(Rule)
          this.nextStep()
          setTimeout(() => {
            this.$router.push('/main/activity/activitySchool')
          }, 3000) // 3000毫秒 = 3秒
          this.$notify({
            message: '规则创建成功',
            type: 'success'
          })
        } else {
          // 处理查询结果为空的情况
          this.$message.error('请先创建活动')
        }
      }).catch(error => {
        // 处理查询失败的情况
        console.error(error)
      })
      this.reload()
    }
  }
}
</script>

<style scoped>
/* 侧边栏按钮样式 */
.aside_open_close{
  position: absolute;
  right: 0;
  top: 50%;
  width: 16px;
  height: 60px;
  line-height: 60px;
  color: #fff;
  background-color: #526372;
  border-radius:  6px 0 0 6px ;
  font-size: 20px;
  z-index: 1000;
  cursor: pointer;
}
.el-table th.el-table__cell{
  background-color: transparent;
}
.aside_open_close:hover{
  background-color: #FF8E2B;
  color: #fff;
}
.activity-wrapper {
  max-width: 800px; /* 设置最大宽度 */
  margin: 0 auto; /* 居中显示 */
  padding: 20px;
}

/* 调整表单元素间距 */
.form-item {
  margin-bottom: 20px;
}

/* 调整输入框宽度 */
.input-width {
  width: 100%;
}
/deep/ .el-table__header{
  background-color: transparent;
}
.el-table__header{
  background-color: transparent;
}
/* 添加返回按钮样式 */
.el-button.icon-back {
  margin-bottom: 20px;
}
</style>
